import React, { useEffect, useState } from 'react';
import { Box, Icon, Input, MainButton, makeToast, Text, ThemeColorType } from '@nova-hf/ui';
import { useTranslation } from 'beta/utils/i18n';
import { useContractQuery, useUpdateInvoiceExplanationMutation } from 'typings/graphql';

type ChangeInvoiceDescriptionProps = {
  contractId: string;
  color: ThemeColorType;
};

const ChangeInvoiceDescription = ({ contractId, color }: ChangeInvoiceDescriptionProps) => {
  const { t } = useTranslation(['stillingar', 'multi']);
  const [isEdited, setIsEdited] = useState(false);
  const [toHighError, setToHighError] = useState(false);

  const { data, loading, error, refetch } = useContractQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
    skip: !contractId,
  });

  const contract = data?.contract;
  const currentInvoiceDescription = contract?.invoiceExplanation;
  const [invoiceDescription, setInvoiceDescription] = useState('');
  const [addInvoiceDescription, { loading: addLoading }] = useUpdateInvoiceExplanationMutation({
    onCompleted: (data) => {
      makeToast.success(t('multi:invoiceDescription.success'), '');

      if (data) {
        refetch();
      }
    },
    onError(error) {
      makeToast.danger(t('multi:invoiceDescription.fail'), error.message);
    },
  });

  const handleButtonClick = async () => {
    try {
      await addInvoiceDescription({
        variables: {
          input: {
            invoiceExplanation: invoiceDescription ?? '',
            id: contractId,
          },
        },
      });
      setIsEdited(false);
    } catch (error) {
      if (error instanceof Error) {
        makeToast.danger(t('departmentSettings.updateContractError'), error.message);
      }
    }
  };

  useEffect(() => {
    if (invoiceDescription) {
      if (invoiceDescription === contract?.invoiceExplanation) setIsEdited(false);
      if (invoiceDescription !== contract?.invoiceExplanation) setIsEdited(true);
      if (invoiceDescription.length < 250) setToHighError(false);
      if (invoiceDescription.length > 250) setToHighError(true);
    }
  }, [invoiceDescription]);

  if (loading) return <Box padding={6}>{t('multi:invoiceDescription.loading')}</Box>;
  if (error || !data?.contract)
    return <Box padding={6}> {t('multi:invoiceDescription.error')}</Box>;

  return (
    <Box>
      <Box display="flex" flexDirection="column" gap={3}>
        <Text variant="pMediumBold" color="black100">
          {t('multi:invoiceDescription.current')}
        </Text>
        <Box>
          <Text variant="eyebrowMedium" color="black100">
            {t('multi:invoiceDescription.eyebrow')}
          </Text>
          <Text>{currentInvoiceDescription ?? 'Engin útskýring er á reikningnum'}</Text>
        </Box>
        <Text variant="pMediumBold" color="black100">
          {t('multi:invoiceDescription.change')}
        </Text>
        <Box marginTop={2} display="flex" flexDirection="column" gap={4}>
          <Input
            id="CreditCardInput"
            label={t('multi:invoiceDescription.newInvoice')}
            name="New ceiling Input"
            value={invoiceDescription}
            required
            isBold={false}
            disabled={false}
            onChange={(e) => setInvoiceDescription(e.target.value)}
          />
        </Box>
        {toHighError && (
          <Box
            gap={1}
            display="flex"
            flexDirection="row"
            alignItems="center"
            marginRight="auto"
            width="4/12"
          >
            <Icon icon="info" color="warning" />
            <Text marginRight="auto" color="warning" variant="pSmallRegular">
              {t('multi:invoiceDescription.highError')}
            </Text>
          </Box>
        )}
        <Box marginLeft="auto" width="4/12" marginTop={10}>
          <MainButton
            text={t('multi:invoiceDescription.confirm')}
            onClick={handleButtonClick}
            dottedShadow="none"
            colorScheme={color}
            isLoading={loading || addLoading}
            isDisabled={!invoiceDescription || !isEdited}
          />
        </Box>
      </Box>
    </Box>
  );
};

export default ChangeInvoiceDescription;